<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>药品管理</title>
    <!--    layui-->
    <link rel="stylesheet" href="../layui-v2.6.5/layui/css/layui.css">
    <script src="../layui-v2.6.5/layui/layui.js"></script>
    <!--    自己的js-->
    <script src="../jquery/jquery-1.12.4.js"></script>
    <script src="js/drug.js" type="text/javascript"></script>

    <!--    弹出层-->
    <link rel="stylesheet" href="../layer/theme/default/layer.css">
    <script src="../layer/layer.js"></script>

    <!--    自己的样式-->
    <link rel="stylesheet" href="css/drug.css">
</head>
<body>
<!-- 药品查询-->
<div>
    <div class="layui-form">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">药品名称</label>
                <div class="layui-input-inline" style="width: 160px;">
                    <input type="text" id="drugname" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">药品类型</label>
                <div class="layui-input-inline" style="width: 160px;">
                    <select id="drugtype">
                        <option value="0">查询全部</option>
                        <option value="1">中药</option>
                        <option value="2">西药</option>
                    </select>
                </div>
            </div>
        </div>
    </div>
    <table id="drug" lay-filter="drugs">

    </table>
</div>
</body>
<!--头工具栏事件-->
<script type="text/html" id="toolbarDemo2">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="sel">查询</button>
        <button class="layui-btn layui-btn-sm" lay-event="upd">刷新</button>
        <button class="layui-btn layui-btn-sm" lay-event="check">检查库存</button>
    </div>
</script>

<!--行工具事件-->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="decl">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script>
    //标记
    let flag = false;
    //加载表格
    layui.use('table', function () {
        let table = layui.table;
        table.render({
            elem: '#drug',
            id: "drug",
            height: 520,
            url: "http://localhost:8080/com/initServlet?opr=drugQuery",
            method: 'get',
            page: true,
            limit: 10,
            toolbar: "#toolbarDemo2",  //表头工具栏
            cols: [[
                {field: 'id', title: '药品编号', width: 140, sort: true, fixed: 'left'},
                {field: 'drugName', title: '药品名称', width: 120},
                {
                    field: 'type', title: '药品类型', width: 140, templet: function (d) {
                        return d.type === 1 ? '中药' : '西药';
                    }
                },
                {field: 'price', title: '药品价格', width: 120, sort: true, edit: 'text'},
                {
                    field: 'count', title: '库存数量', width: 120, sort: true, templet: function (d) {
                        return d.count;
                    }
                },
                {field: 'remark', title: '药品描述', width: 400, edit: 'text'},
                {
                    field: 'show', title: '库存状态', width: 100, templet: function (d) {
                        return d.count < 100 ? "<span style='color: #e72727'>库存不足</span>" : "<span style='color:#35f535'>库存充足</span>"
                    }
                },

                {field: 'tool', title: '操作', width: 140, toolbar: "#barDemo"}
            ]],
            text: {
                none: '暂无数据'
            },
            where: {
                drugName: "",    //药品名称
                drugType: 0          //药品类型
            },
            done: function (res) {
                if (flag) {
                    return;
                }
                let data = res.data;
                if (data.length === 0) {
                    return;
                }
                flag = true;
                //查询库存状态
                $.ajax({
                    url: "http://localhost:8080/com/initServlet",
                    type: "post",
                    data: {
                        opr: "check"
                    },
                    dataType: "json",
                    success: function (data) {
                        if (data.length <= 0) {
                            return;
                        }
                        let lis = ``;     //数据集合
                        for (let i = 0; i < data.length; i++) {
                            if (data[i].count < 100) {
                                lis += `<li class="liuis">
                                        <input type="checkbox" class="check">
                                        <span class="span">${data[i].id}</span>
                                        <span class="span">${data[i].drugName}</span>
                                        <span class="span">${data[i].count}</span>
                                        </li>`
                            }
                        }
                        let div = `<div class="kun">
                                      <h2 class="title">库存名单</h2>
                                      <div>
                                          <ul>
                                            <li class="liui">
                                                <input type="checkbox" class="check">
                                                <span class="span">药品编号</span>
                                                <span class="span">药品名称</span>
                                                <span class="span">剩余库存</span>
                                            </li>
                                            ${lis}
                                          </ul>
                                      </div>
                                   </div>`;
                        //弹出层
                        layer.open({
                            id: 'hint',                //设定一个id，防止重复弹出
                            type: 1,                   //弹出层类型
                            title: false,              //不显示标题栏
                            content: div,              //弹出层内容
                            closeBtn: false,           //关闭按钮
                            resize: false,             //是否允许窗口拉伸
                            btn: ['申请入库', '全部关闭'],      //按钮
                            btnAlign: 'c',             //按钮居中
                            moveType: 1,               //拖拽模式，0或者1
                            yes: function (index, layero) {
                                // 重新加载模块
                                layui.use('element', function () {
                                    let element = layui.element;
                                    element.tabChange('synthesis', 'stork');
                                });
                                //创建药单
                                $("body .kun .liuis").find(".check:checked").each(function () {
                                    let drugID = $(this).next().text();
                                    let drugName = $(this).next().next().text();
                                    let li = `<li class="liui2">
                                          <div class="div2">
                                            <span class="span2">${drugID}</span>
                                            <span class="span2">${drugName}</span>
                                            <span class="span2">
                                                <input type="text" class="input">
                                            </span>
                                            <span class="span2">
                                                <a href="javascript:void(0)">删除</a>
                                            </span>
                                          </div>
                                      </li>`;
                                    $(".divui>ul").append(li);
                                })
                                //关闭弹出层
                                layer.close(index);
                            },
                            btn2: function (index, layero) {
                                layer.close(index);
                            }
                        })
                    }
                })

            }
        })
        //工具头  做了查询和刷新
        table.on('toolbar(drugs)', function (obj) {
            let drugs = table.checkStatus(obj.config.id);
            let drugName = $("#drugname").val();
            let drugType = $("#drugtype").val();
            switch (obj.event) {
                case 'sel':
                    table.reload('drug', {
                        page: {
                            curr: 1
                        },
                        where: {
                            drugName: drugName,
                            drugType: drugType
                        }
                    })
                    break;
                case 'upd':
                    table.reload('drug', {
                        where: {
                            drugName: drugName,
                            drugType: drugType
                        }
                    })
                    break;
                case 'check':
                    // let div = `<div class="yandiv">待优化</div>`;
                    // layer.open({
                    //     id: 'hint',           //设定一个id，防止重复弹出
                    //     type: 1,              //弹出层类型
                    //     title: false,         //不显示标题栏
                    //     content: div,         //弹出层内容
                    //     closeBtn: false,      //关闭按钮
                    //     area: '500px',        //层大小
                    //     shade: 0.3,           //外阴影
                    //     resize: false,        //是否允许窗口拉伸
                    //     btn: ['全部关闭'],     //按钮
                    //     btnAlign: 'c',        //按钮居中
                    //     moveType: 1           //拖拽模式，0或者1
                    // })
                    break;
            }
        })

        //单元格编辑  单独更改字段
        table.on('edit(drugs)', function (obj) {
            $.ajax({
                url: "http://localhost:8080/com/drugServlettt",
                type: "post",
                data: {
                    opr: "upDrug",    //操作符
                    id: obj.data.id,    //药品编号
                    field: obj.field,   //字段名
                    value: obj.value     //属性值
                },
                dataType: 'json',
                success: function (data) {

                }
            })
        })

        //行工具条
        table.on('tool(drugs)', function (obj) {
            let choo = obj.event;    //拿到事件名
            let date = obj.data;
            switch (choo) {
                case 'decl':
                    layer.prompt({
                        formType: 2,
                        title: '药品描述',
                        value: date.remark
                    }, function (value, index) {
                        $.ajax({
                            url: "http://localhost:8080/com/drugServlettt",
                            type: "post",
                            data: {
                                opr: "upRemark",    //操作符
                                id: date.id,    //药品编号
                                value: value
                            },
                            dataType: 'json',
                            success: function (data) {

                            }
                        })
                        obj.update({
                            remark: value
                        })
                        layer.close(index);
                    })
                    break;
                case 'del':
                    layer.msg('删除药品请与相关人员联系')
                    break;
            }
        })
    })
</script>
</html>